<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import * as admin from '@/api/admin.js'
import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore();

// 用户列表数据
const users = ref([]);
const dialog = ref(false);
const centerDialogVisible = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const search_username = ref('');
const search_status = ref('正常');
const search_phone = ref('');

const updateData = ref({
  id: "",
  username: "",
  nickname: "",
  phone: "",
  email: "",
});

const addData = ref({
  username: "",
  nickname: "",
  phone: "",
  email: "",
});

const handleSubmit = () => {
  console.log("提交的数据：", addData.value);
  centerDialogVisible.value = false;
};


// 模拟获取数据
const fetchUsers = async() => {
  const param = {
      currentPage: currentPage.value,
      role: 'user',
      username: search_username.value,
      phone: search_phone.value,
      status: search_status.value,
  }
  console.log(param);
  const res = await admin.finduser(param)
  users.value = res.data;
  total.value = res.total;
};

// 搜索用户
const searchUser = () => {
  // ElMessage.success(`搜索：${searchParams.username || '全部'}，${searchParams.phone || '全部'}`);
  fetchUsers();
};

// 删除用户
const deleteUser = (id) => {
  ElMessageBox.confirm('确认删除该用户？', '提示', { type: 'warning' })
    .then(async () => {
      const res = await admin.deluser({id:id})
      ElMessage.success('删除成功');
    })
    .catch(() => ElMessage.info('取消删除'));
};

const addUser = async() => {
  const res = await admin.adduser(addData.value)
  ElMessage.success(res.msg? res.msg:'添加成功');
  centerDialogVisible.value = false;
  fetchUsers();
};

// 修改用户
const editUser = async() => {
  const res = await admin.updateuser(updateData.value)
  ElMessage.success(res.msg? res.msg:'修改成功');
  dialog.value = false;
  fetchUsers();
};

const showDialog = (row) => {
  console.log(row.title);
  updateData.value.id = row.id;
  updateData.value.username = row.username;
  updateData.value.nickname = row.nickname;
  updateData.value.phone = row.phone;
  updateData.value.email = row.email;
  updateData.value.status = row.status;
}

// 分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchUsers();
};

// 初始化加载数据
onMounted(() => {
  fetchUsers();
});
</script>

<template>
  <div class="user-page">
    <!-- 搜索框 -->
    <el-card class="search-box">
      <el-form :inline="true">
        <el-form-item label="用户名">
          <el-input v-model="search_username" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="search_phone" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="search_status" style="width: 150px;" placeholder="请选择状态">
            <el-option label="正常" value="正常" />
            <el-option label="禁用" value="禁用" />
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="searchUser()">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 添加按钮 -->
    <el-card class="add-box">
      <el-button type="success" @click="centerDialogVisible=true">➕ 添加用户</el-button>
    </el-card>

    <!-- 用户列表 -->
    <el-card>
      <el-table :data="users" border style="width: 100%">
        <!-- <el-table-column prop="id" label="ID" width="60" /> -->
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="nickname" label="昵称" />
        <el-table-column prop="createdAt" label="创建时间" />
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="showDialog(row),dialog=true">修改</el-button>
            <el-button type="danger" size="small" @click="deleteUser(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="handlePageChange"
      />
    </div>

    <el-drawer
    v-model="dialog"
    title="修改用户信息"
    direction="rtl"
    class="demo-drawer"
    >
    <div class="demo-drawer__content">
      <el-form :model="updateData">
        <el-form-item label="用户名">
          <el-input v-model="updateData.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="updateData.nickname" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="updateData.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="updateData.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-radio-group v-model="updateData.status" class="ml-4">
            <el-radio label="正常" size="large">正常</el-radio>
            <el-radio label="禁用" size="large">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="dialog=false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="editUser()">提交</el-button>
      </div>
    </div>
    </el-drawer>

    <el-dialog 
    v-model="centerDialogVisible" 
    title="添加用户" 
    width="30%" 
    center
    >
  <el-form 
    label-width="80px" 
    :model="addData" 
    style="padding: 10px 20px"  >
    <el-form-item label="用户名">
      <el-input v-model="addData.username" placeholder="请输入用户名" />
    </el-form-item>
    <el-form-item label="昵称">
      <el-input v-model="addData.nickname" placeholder="请输入昵称" />
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="addData.phone" placeholder="请输入手机号" />
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="addData.email" placeholder="请输入邮箱" />
    </el-form-item>
  </el-form>

  <template #footer>
    <span class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取消</el-button>
      <el-button 
        type="primary" 
        @click="addUser()"
      >
        提交
      </el-button>
    </span>
  </template>
    </el-dialog>



  </div>
</template>

<style scoped>
.user-page {
  padding: 20px;
  background: #f7f8fa;
}

.search-box {
  margin-bottom: 15px;
}

.add-box {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
</style>
